<script>
  let { height, scrollToEnd, extraClass } = $props();
  let container = $state();
  let inner = $state();

  export const focus = () => {
    if (container === document.activeElement)
      return false;
    container.focus();
    return true;
  }

  $effect(() => {
    const resizeObserver = new ResizeObserver((_) => {
      if (scrollToEnd)
        container.scrollTop = container.scrollHeight;
    });
    resizeObserver.observe(inner);

    return () => resizeObserver.unobserve(inner);
  });
</script>

<div class="scroll-area {extraClass ?? ''}" tabindex="0" style="height: {height}" bind:this={container}>
  <div class="" bind:this={inner}>
    <slot />
  </div>
</div>

<style>
  .scroll-area {
    /* Gecko-based */
    scrollbar-width: none;
  }

  .scroll-area::-webkit-scrollbar {
    /* Webkit/Blink-based */
    display: none;
  }

  .scroll-area {
    overflow: auto;
  }
</style>
